<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <title>02-ES6 的 promise</title>
</head>

<body>
    <script>
        /*
            Promise
                是一个构造函数，是es6新增的用来解决回调地狱一种方案
                回调地狱：多个请求，第二请求依赖于第一个请求的参数，第二个请求需要在第一个请求的成功回调里发送，第三个请求依赖于第二个请求的结果
                    就需要在第二个请求成功回调里发送第三个请求，请求嵌套的层次比较深，就形成了回调地狱

                Promise调用的时候接收1个参数,参数是回调函数，
                    回调函数执行是同步执行
                    回函函数接收2个参数，这个参数都是函数
                        第一个参数执行会将promise状态从pending变成fulfilled/resolved
                        第二个参数执行会将promise状态从pending变成rejected
                Promise的状态：
                    pending
                    fulfilled
                    rejected
                    注意：promise的状态只能是从pending变成 fulfilled，或者从 pending变成 rejected
                改变promise状态的方式：
                    变成成功
                        1、调用resolve方法
                    变成失败
                        1、调用reject方法
                        2、内部代码出错
                        3、手动抛出一个错误
            .then()
                可以接收两个参数，这两个参数都是回调函数
                    第一个参数的执行时机：promise状态从pending变成 fulfilled
                    第二个参数的执行时机：promise状态从pending变成 rejected
            .then()的返回值是一个全新的promise
                返回值promise的状态
                    成功
                        1、回到函数执行完毕,内部代码不出错,状态就是fulfilled
                        2、内部返回一个成功的promise，状态就是fulfilled
                    失败
                        1、内部代码出错，状态就是 rejected
                        2、回调函数内部手动抛出错误，状态就是 rejected
                        3、内部返回一个失败的promise，，状态就是 rejected
            .then()不接受回调函数
                promise状态值，参考的上个promise状态值
            .catch()
                接收一个参数，参数是个回调函数
                该参数执行的时机：promise状态失败，并且.then()没有传递第二个参数
                返回值：全新的promise,状态值，参考.then的特点
            async await
                解决回调地狱的终极方案
            async:可以单独使用，使用async声明函数，返回值是个promise对象
            await：不可以单独使用，必须要个async配合使用(es12之后，允许await单独使用了，需要放在顶级作用域去使用，只不过浏览器还不支持)
                

        */


        // async function fn() {
        //     let p = new Promise((resolve,reject) => {
        //         resolve(123)
        //     })
        //     // p.then((data) => {
        //     //     console.log(data)
        //     // })
        //     let result = await p;
        //     console.log(result)
        // }
        // fn()
        //  function fn() {
        //     await 123
        // }
        // console.log(fn())
        // await 123


        //  function fn(){
        //     await 123
        //  }
        // console.log(fn())  

        // let p = new Promise((resolve, reject) => {
        //     resolve(123123)
        //     // reject()
        //     // console.lag(123)
        //     // throw new Error()


        // })
        // let result = p.then((data) => {
        //     console.log(data)
        //  }, () => { }).catch(() => { })
        // console.log(result)


        // async function fn() {
        //     let p1 = new Promise((resolve) => {
        //         resolve(1)
        //     })
        //     let p2 = new Promise((resolve, reject) => {
        //         reject(2)
        //     })
        //     let p3 = new Promise((resolve) => {
        //         resolve(3)
        //     })
        //     let result = await Promise.allSettled([p1, p2, p3])
        //     console.log(result)
        // }

        // fn()

        new Promise((resolve, reject) => {
            console.log("1");
            resolve();
        })
            .then(() => {
                console.log("2");
                new Promise((resolve, reject) => {
                    console.log("3");
                    resolve();
                })
                    .then(() => {
                        console.log("4");
                    })
                    .then(() => {
                        console.log("5");
                    });
            })
            .then(() => {
                console.log("6");
            });

        new Promise((resolve, reject) => {
            console.log("7");
            resolve();
        }).then(() => {
            console.log("8");
        });
    </script>
</body>

</html>